<template>
  <section class="ProjectJobCard__container">
    <div class="__body">
      <h1 class="title">
        <slot name="reportEvent" v-if="$slots.reportEvent"></slot>
        <span v-else>{{ item.name }}</span>
      </h1>
      <p class="remark">{{ item.remark }}</p>
      <p class="plan">
        <span>
          计划<span class="date">{{ item.plan_start_date }}</span
          >开始 <span class="date">{{ item.plan_end_date }}</span
          >完成
        </span>
        <span
          >预估<span class="strong">{{ item.work_load }}</span
          >人天</span
        >
      </p>

      <div class="real">
        <span class="progress">
          <el-progress
            :percentage="item.progress ? +item.progress : 0"
            :stroke-width="1"
          ></el-progress>
        </span>

        <p class="content">
          <span>
            <span class="date" v-if="item.real_end_date"
              >{{ item.real_start_date }}开始 ~
            </span>
            <span class="date" v-if="item.real_end_date"
              >{{ item.real_end_date }}完成</span
            >
          </span>
        </p>
      </div>

      <p class="create">
        <span>
          <span class="strong">{{ item.leader_name }}</span>
          实耗<span class="strong">{{ item.real_work_load }}</span
          >人天
        </span>
        <span>{{ item.creator_name }} 创建于 {{ item.create_date }}</span>
      </p>
    </div>
    <div v-if="!noAction" class="__footer">
      <div class="_footeritem"><slot :item="item"></slot></div>
    </div>

    <div class="stamp">
      <quick-stamp v-if="+item.status == 1" label="进行中" type="primary" />
      <quick-stamp v-if="+item.status == 2" label="已暂停" type="warning" />
      <quick-stamp v-if="+item.status == 0" label="未开始" type="info" />
      <quick-stamp v-if="+item.status == 3" label="已完成" type="success" />
      <quick-stamp v-if="+item.status == 4" label="已取消" type="danger" />
    </div>
  </section>
</template>

<script>
import GenderIcon from "../Common/GenderIcon.vue";
export default {
  components: { GenderIcon },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    noAction: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    reportList() {},
  },
};
</script>

<style lang="scss" scoped>
.ProjectJobCard__container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 460px;
  box-sizing: border-box;
  box-shadow: 0 0 12px #ebebeb;
  border-radius: 5px;
  overflow: hidden;
  transition: 0.5s;

  .__body {
    display: flex;
    flex-direction: column;

    padding: 10px;
    line-height: 1.6;
    font-size: 1.2rem;

    h1 {
      font-size: 2rem;
      font-weight: bold;
      height: 30px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover {
        color: #409eff;
        cursor: pointer;
      }

      .name {
        margin-right: 10px;

        &:hover {
          color: #409eff;
          cursor: pointer;
        }
      }

      .flag {
        position: absolute;
        left: -10px;
        top: -1px;
        // border: 2px solid coral;
        background: coral;
        transform: rotate(-45deg);
        // border-radius: 50%;
        color: white;
        padding: 2px 10px;
        line-height: 1;
        font-size: 1.2rem;
        height: auto;
      }
    }

    .remark {
      height: 60px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      margin: 3px 0;
      color: #666;
    }

    .plan {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // border-bottom: 1px solid;
      border-image: linear-gradient(to right, #fcfcfc, #e0e0e0, #fcfcfc) 1;
      // color: #333;

      .date {
        color: #e67e22;
        margin: 0 2px;
      }
    }

    .real {
      display: flex;
      flex-direction: column;

      .progress {
        margin: 20px 0;
      }

      .content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 10px;
      }
    }

    .create {
      display: flex;
      justify-content: space-between;
      // border-top: 1px solid;
      border-image: linear-gradient(to right, #fcfcfc, #e0e0e0, #fcfcfc) 1;
      padding-top: 5px;
      align-items: flex-end;
    }

    p {
      color: #999;

      font-size: 1.2rem;

      // span {
      //     font-size: 1.2rem;
      //     // border: 1px solid #409eff;
      //     border-radius: 5px;
      //     margin: 0 5px 0 0;
      //     padding: 0 5px;
      //     // color: #409eff;
      //     background: #ebebeb;
      // }

      .strong {
        color: #e67e22;
        font-size: 1.8rem;
        margin: 0 5px;
      }
    }
  }

  .__footer {
    // display: none;
    // display: block;
    height: 30px;
    // transition: 1s;
    background: #fcfcfc;
    display: flex;
    justify-content: flex-end;
    ._footeritem {
      margin-right: 10px;
    }
  }

  &:hover {
    // > .__footer {
    //   // display: flex;
    //   height: 30px;
    //   background: #f4f4f4;
    // }
  }

  .stamp {
    position: absolute;
    right: 5%;
    top: -5%;
  }
}
</style>